<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习 - 翻书效果</title>
  <style>
    .perspective {
      margin-top: 200px;
      perspective: 800px;
    }

    .book-wrap {
      width: 300px;
      height: 300px;
      position: relative;
      margin: 0 auto;
      transform: rotateX(30deg);
      transform-style: preserve-3d;
    }

    .page {
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 300px;

      position: absolute;
      left: 0;
      top: 0;

      font-size: 30px;
     /* 元素开始进行变换的圆点 */
      transform-origin: left;
      border: 1px solid #1976D2;
    }

    .book-content {
      background-color: #fff;
      color: #33363C;
    }

    .book-content1{
      /* 动画第一个事件表示动画执行所需要的事件,
      第二个时间表示延时执行的事件,这里第三个延时
      一秒就表示它最先执行,但是他们都花费了6秒
      而还有一个不延时的,它最早执行,后面的2表示
      动画一共执行了两次,然后有一个逆向的执行 */
      animation: roll 3s ease 3s 2 alternate;
    }

    .book-content2 {
      animation: roll 4s ease 2s 2 alternate;
    }

    .book-content3 {
      animation: roll 5s ease 1s 2 alternate;
    }

    .book-cover {
      background-color: #1976D2;
      color: #ffffff;
      animation: roll 6s ease 0s 2 alternate;
    }

    @keyframes roll {
      from {
        transform: rotateY(0);
      }

      to {
        transform: rotateY(-180deg);
      }
    }
  </style>
</head>
<body>
  <div class="perspective">
    <div class="book-wrap">
      <div class="page book-content">end</div>
      <div class="page book-content book-content1">JavaScript</div>
      <div class="page book-content book-content2">CSS</div>
      <div class="page book-content book-content3">HTML</div>
      <div class="page book-cover">网页布局</div>
    </div>
  </div>
</body>
</html>